<template>
	<view v-if="show && item" class="modal-container" @touchmove.stop.prevent>
		<view class="modal-box">
			<view class="modal-input">
				<view class="input-box">
					<input
						class="input-inner"
						type="number"
						maxlength="11"
						placeholder="请输入已注册商家用户手机号"
						v-model="phone"
					/>
				</view>
			</view>

			<view class="modal-input">
				<view class="input-box">
					<input
						class="input-inner"
						type="number"
						maxlength="6"
						placeholder="请输入验证码"
						v-model="captcha"
					/>
					<view v-if="captchaCount === 0" class="input-btn" @click="getCaptcha">获取验证码</view>
					<view v-else class="input-btn">{{ captchaCount }}s后重试</view>
				</view>
			</view>

			<view class="modal-btn-area">
				<pys-button @click="confirm" width="392rpx" height="56rpx" size="24">
					确认修改
				</pys-button>
			</view>

			<!-- <view class="modal-tips">未注册用户无法授权</view>
			<view class="modal-tips">
				请关注
				<text class="text-primary">拼一手</text>
				公众号，注册成为商家用户
			</view> -->
		</view>
		<view class="modal-mask" @click="cancel"></view>
	</view>
</template>

<script>
import { validation } from '@/plugins/tui-validation/tui-validation.js';
import { AccountBind, Phone } from '@/common/js/rules/rules.js';

export default {
	name: 'ModalAccountBind',
	data() {
		return {
			show: false,
			item: null,
			onConfirm: null,
			onCancel: null,
			phone: '',
			captcha: '',
			captchaCount: 0,
			captchaTimer: null,
			userAvatar: '',
			userNickname: '',
		};
	},
	methods: {
		open(item) {
			this.show = true;
			this.item = item;
			return new Promise((resolve, reject) => {
				this.onConfirm = resolve;
				this.onCancel = reject;
			});
		},
		cancel() {
			this.show = false;
			this.$nextTick(() => {
				this.item = null;
				this.phone = '';
				this.captcha = '';
				this.captchaCount = 0;
				clearInterval(this.captchaTimer);
				this.captchaTimer = null;
				this.userAvatar = '';
				this.userNickname = '';
			});
			this.onCancel();
		},
		getCaptcha() {
			const params = { phone: this.phone, mode: 4 };
			const checkRes = validation(params, Phone);
			if (checkRes) {
				this.$g.toast(checkRes);
				return;
			}
			this.$apis.common.getCaptcha(params, { isLoad: true })
				.then(res => {
					this.setCaptchaTimer();
					this.userAvatar = res.avatar_url || this.$base.avatarDefault;
					this.userNickname = res.nickname || '';
				});
		},
		setCaptchaTimer() {
			this.captchaCount = 60;
			this.captchaTimer = setInterval(() => {
				this.captchaCount--;
				if (this.captchaCount === 0) {
					clearInterval(this.captchaTimer);
				}
			}, 1000);
		},
		confirm() {
			const params = {
				sub_id: this.item.sub_id,
				phone: this.phone,
				captcha: this.captcha
			};
			let checkRes = validation(params, AccountBind);
			if (checkRes) {
				this.$g.toast(checkRes);
				return;
			}
			this.$apis.merchant.bindAccount(params)
				.then(res => {
					this.show = false;
					this.onConfirm();
				});
		}
	}
};
</script>

<style lang="scss" scoped>
.modal-container {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: $z-index-modal;
	display: flex;
	align-items: center;
	justify-content: center;
}

.modal-mask {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.6);
	z-index: $z-index-modal;
}

.modal-box {
	position: relative;
	z-index: $z-index-modal + 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 560rpx;
	padding: 40rpx 0 8rpx;
	background-color: #fff;
	border-radius: 10rpx;
}

.modal-title {
	font-size: 30rpx;
	line-height: 30rpx;
	margin-bottom: 28rpx;
}

.modal-input {
	padding: 12rpx 0;

	.input-box {
		display: flex;
		align-items: center;
		width: 392rpx;
		height: 64rpx;
		padding: 0 16rpx 0 48rpx;
		background-color: $bg-color;
		border-radius: 10rpx;
	}
	.input-inner {
		flex: 1 0 1%;
		height: 64rpx;
		min-height: 64rpx;
		font-size: 24rpx;
	}
	.input-btn {
		flex: 0 0 140rpx;
		text-align: center;
		font-size: 24rpx;
		color: $type-primary;
	}
}

.modal-user-avatar {
	flex-shrink: 0;
	height: 192rpx;
	width: 192rpx;
	margin: 12rpx 0 16rpx;
	border-radius: 50%;
}
.modal-user-nickname {
	font-size: 24rpx;
	line-height: 24rpx;
	color: #888;
}

.modal-btn-area {
	padding: 24rpx;
}
.modal-tips {
	font-size: 24rpx;
	line-height: 24rpx;
	margin-bottom: 16rpx;
}
</style>
